<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      title="订单详情"
      :background="{ background: '#fff' }"
      title-color="#000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <view class="each-order" hover-class="none" hover-stop-propagation="false">
      <view class="mb10">订单号：{{order.orderNo}}</view>
      <view class="mb10 bold red">订单金额：¥{{ order.price }}</view>
      <view class="mb10">下单时间：{{ order.time }}</view>
      <view class="mb10">取衣时间：{{order.receivetime}}</view>
      <view class="mb10">地址：{{order.location}}</view>
      <view class="mb10">订单状态：{{order.status}}</view>
      <view class="mb10" v-if="order.rejectreason">商家拒绝原因：{{order.rejectreason}}</view>
      <view class="mb10" v-if="order.status === '已取消'">取消原因：{{order.applicationreason}}</view>
      <view v-if="order.status == '已付款'" class="btns">
        <view class="cancel-btn green" @click="cancelOrder(order, '已送达')">已送达</view>
        <view class="cancel-btn" @click="cancelOrder(order, '已取消')">取消订单</view>
      </view>
      <view v-if="order.status == '派送中'" class="btns">
        <view class="cancel-btn green" @click="cancelOrder(order, '已完成')">完成订单</view>
        <view class="cancel-btn" @click="curOrder = order,show = true;curStatus = '申请售后'">申请售后</view>
      </view>
    </view>
    <u-modal :title="curStatus" v-model="show" :title-style="{color: '#000'}" show-cancel-button @confirm="modalSubmit" confirm-text="提交" cancel-text="取消" @cancel="show = false">
			<view class="slot-content" style="padding: 30rpx;">
        <u-form :model="form" ref="uForm" :label-width="150">
          <u-form-item label="原因"
            ><u-input v-model="form.applicationreason" placeholder="请输入原因"
          /></u-form-item>
          <u-form-item label="照片"
            >
            <u-upload :maxCount="1" ref="uUpload" :action="action"></u-upload>
          </u-form-item>
        </u-form>
			</view>
		</u-modal>
  </view>
</template>

<script>
import { updateOrder } from "../../api/system/api";
export default {
  data() {
    return {
      order: {},
      totalPrice: 0,
      show: false,
      curOrder: {},
      curStatus: '',
      form: {
        applicationreason: ''
      },
			action: 'http://localhost:9090/files/upload',
    };
  },
  onLoad(option) {
    this.order = JSON.parse(option.order);
  },
  methods: {
    cancelOrder(row, status) {
      if (status === '已取消') {
        this.curOrder = row;
        this.show = true;
        this.curStatus = '取消订单'
        return
      }
      updateOrder({
        ...this.order,
        goodsinfo: JSON.stringify(this.order.goodsinfo),
        status
      }).then(res => {
        this.$refs.uToast.show({
					title: '操作成功',
					type: 'success',
				})
        setTimeout(() => {
          uni.switchTab({ url: `/pages/user/center` });
        }, 1000)
      })
    },
    modalSubmit() {
      if (!this.form.applicationreason || this.$refs.uUpload.lists.length == 0) {
        this.$refs.uToast.show({
					title: '申请失败，请填写理由和上传相关图片',
					type: 'error',
				})
				return
      }
      updateOrder({
        ...this.order,
        status: this.curStatus === '取消订单' ? '已取消' : '申请退款',
        ...this.form,
        goodsinfo: JSON.stringify(this.order.goodsinfo),
        applicationimg: this.$refs.uUpload.lists[0].response.data
      }).then(res => {
        this.$refs.uToast.show({
					title: '操作成功',
					type: 'success',
				})
        setTimeout(() => {
          uni.switchTab({ url: `/pages/user/center` });
        }, 1000)
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
}

.good {
  display: flex;
  margin-bottom: 10rpx;
}
.title {
  font-weight: bold;
  font-size: 30rpx;
  margin-bottom: 6rpx;
}
.row {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.pay {
  width: 100%;
  text-align: right;
}
image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}
.each-order {
  width: 96%;
  margin: 20rpx 2%;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  position: relative;
}
.btns {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  .cancel-btn {
    margin-top: 10rpx;
    padding: 10rpx 20rpx;
    background: red;
    border-radius: 20rpx;
    color: #fff;
  }
}
.mb10 {
  margin-bottom: 10rpx;
}
.bold {
  font-weight: bold;
}
.red {
  color: red;
}
.green {
  background: lightgreen !important;
  color: #333;
  margin-left: 20rpx;
}
</style>
